revision:
<div class="spec">
<img src="../images/1.jpg" id="foto-1" alt="holiday" width="30%" height="30%" title="holidays photo 1"/>
<img id="foto-2" src="" alt="">
</div>
<style>
#foto-1{border: 0.2vw solid burlywood; border-radius: 10%; }
#foto-1{filter: opacity(0.5); margin: 0 5vw;}
</style>
<script>
const picture1 = document.querySelector("#foto-2");
picture1.src = "../images/2.jpg";
picture1.title = "holidays photo 2";
picture1.width = "400";
picture1.height = "280";
picture1.style.opacity = "0.4"
</script>
click the buttons to change some attributes
<div class="spec grid_A">
<img id="foto-3" src="../images/3.jpg" width="307" height="198"/>
<div>
<p>click the buttons to change some attributes</p>
<button onclick="change()">change width and height</button><br>
<button onclick="change_a()">change opacity and shape</button><br>
<button onclick="change_b()">add inline style</button>
</div>
</div>
<script>
function change(){
document.getElementById("foto-3").width = "500";
document.getElementById("foto-3").height = "398";
}
function change_a(){
document.getElementById("foto-3").style.opacity = "0.3";
document.getElementById("foto-3").style.borderRadius = "20%";
}
function change_b(){
document.getElementById("foto-3").style.border = "0.5vw solid orange";
document.getElementById("foto-3").style.scale = "1.5";
}
</script>
click the button to display the width and height of the image
<div class="spec grid_A">
<img id="foto-4" src="../images/4.jpg" alt="holidays" title="holidays photo 4" width="307" height="198" style="margin: 0 auto;"/>
<div>
<p>click the button to display the width and height of the image</p>
<button onclick="showWidth()">show width and height</button>
<p id="picture3"></p>
<p id="picture3a"></p>
</div>
</div>
<script>
function showWidth(){
var x = document.getElementById("foto-4").width;
var y = document.getElementById("foto-4").height;
document.getElementById("picture3").innerHTML = "width: " + x + "px";
document.getElementById("picture3a").innerHTML = "height: " + y + "px";
}
</script>
<div>
<img class="foto-5" id="pic4" src="" alt="">
<img class="foto-5" id="pic5" src="" alt="">
<img class="foto-5" id="pic6" src="" alt="">
</div>
<style>
.foto-5{border: 0.3vw dashed blue; width: 15vw; height: 10vw; margin: 0 5vw;}
</style>
<script>
const img = document.querySelectorAll(".foto-5");
img[0].src = "../images/1.jpg";
img[0].style.borderRadius = "20%";
img[1].src = "../images/2.jpg";
img[1].style.opacity = "0.3";
img[2].src = "../images/3.jpg";
img[2].style.height = "11vw";
</script>
<div>
<img class="foto-6" id="pic7" src="" alt="">
<img class="foto-6" id="pic8" src="" alt="">
<img class="foto-6" id="pic9" src="" alt="">
</div>
<style>
.foto-6{width: 12vw; height: 10vw; margin: 0 5vw;}
.img-rounded-border{border-radius:1vw;}
</style>
<script>
const img1 = document.querySelectorAll(".foto-6");
img1[0].src = "../images/1.jpg";
img1[0].style.border = ".2vw dotted red";
img1[1].src = "../images/2.jpg";
img1[1].style.border = "0.3vw dashed blue";
img1[2].src = "../images/3.jpg";
img1[2].style.border = "0.3vw inset burlywood";
img1[0].classList.add("img-rounded-border");
img1[1].classList.add("img-rounded-border");
img1[2].classList.add("img-rounded-border");
</script>
<div>
<div id="trial" style=" width: 10vw; height: 10vw;"></div>
<p id="up" style="font-size: 1vw; font-weight: bold;"></p>
<button onclick="getFun()">click here</button><br>
<p id="down" style="color:green;font-size:1vw;font-weight:bold;"></p>
</div>
<script>
var up = document.getElementById("up");
up.innerHTML = "click on the button to add an image element";
var down = document.getElementById("down");
function getFun(){
var img = document.createElement("img");
img.src = "../images/1.jpg";
document.getElementById("trial").appendChild(img);
img.style.width = "20vw";
img.style.height = "10vw";
down.innerHTML = "image element added.";
}
</script>
<div>
<div id="another_trial" style=" width: 10vw; height: 10vw;"></div>
<p id="above" style="font-size: 1vw; font-weight: bold;"></p>
<button onclick="makeFun()">click here</button><br>
<p id="under" style="color:green;font-size:1vw;font-weight:bold;"></p>
</div>
<script>
var above = document.getElementById("above");
above.innerHTML = "click on the button to add an image element";
var under = document.getElementById("under");
function makeFun(){
var img = new Image();
img.src = "../images/2.jpg";
document.getElementById("another_trial").appendChild(img);
img.style.width = "20vw";
img.style.height = "10vw";
under.innerHTML = "image element added.";
}
</script>
<div>
<img id="foto-7" src="" alt="">
</div>
<style>
.img-rounded-border{border: 0.3vw solid red; border-radius: 1vw;}
</style>
<script>
var a = document.getElementById("foto-7");
a.src = "../images/4.jpg";
a.style.width = "20vw";
a.style.height = "10vw";
a.setAttribute("class", "img-rounded-border");
a.setAttribute("title" , "Huangpu river");
</script>
<div>
<img class="foto-8" src=" " alt=" " title=" "/>
</div>
<style>
#img-radius{ border-radius: 50% 40%;}
</style>
<script>
const b = document.querySelector(".foto-8");
b.src = "../images/3.jpg";
b.style.width = "25vw";
b.style.height = "15vw";
b.setAttribute("id", "img-radius");
b.style.border ="0.2vw dashed red"
</script>
hover me
<div class="grid_A">
<div>
<div id="one">
<div class="hover_img">
<a><img src="../images/meh.png"/>hover me<span><img src="../images/vangogh.jpg" height="100px"/></span></a>
</div>
</div>
</div>
<div>hover the pictures
<div>
<div class="zoomin submain a"><img src="../images/vangogh.jpg" title="vangogh-1" height="80px"/></div>
<div class="zoomin submain b"><img src="../images/vangogh.jpg" title="vangogh-2" height="80px"/></div>
<div class="zoomin submain c"><img src="../images/vangogh.jpg" title="vangogh-3" height="80px"/></div>
</div>
</div>
<style>
#one{height: 15vw;}
.hover_img{ position:relative;}
.hover_img a span{position: absolute; z-index:99; margin-top: 2vw;margin-left: 2vw;}
.hover_img a:hover span{display:block; top: 50%; left: 50%; margin-top: 5vw; margin-left: 5vw;}
#two{width: 100%;}
.submain {width: 30%; float: left;}
.zoomin img { width: 10vw; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
.a img:hover{ margin-left:5vw; margin-top:7vw;}
.b img:hover{ margin-top:7vw;}
.c img:hover{ margin-left:-7vw; margin-top:7vw;}
</style>
<div id="menu">
<img id='menuImg' src="../images/vangogh.jpg" alt="vangogh"
onmouseover="onHover();" onmouseout="offHover();" />
</div>
<script>
function onHover() {
$('#menuImg').attr( 'src', '../images/smiley.png');
}
function offHover() {
$('#menuImg').attr( 'src', '../images/vangogh.jpg');
}
</script>
<div>
<img src="../images/vangogh.jpg" alt="" class="home"/>
</div>
<script>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","../images/smiley.png");},
function() {$(this).attr("src","../images/vangogh.jpg");});
});
</script>
<div>
<img src="../images/vangogh.jpg" id='i1' style="position:relative; height: 80px;">
<br><br>
<input type=button onClick=timer() value='Start'>
<input type=button onClick=reset1() value='Reset'>
<div id='msg'></div>
</div>
<script>
function reset1(){
clearTimeout(my_time);
document.getElementById('i1').style.left= "10px";
document.getElementById('i1').style.top= "10px";
document.getElementById("msg").innerHTML="";
}
function disp(){
var step=1; // Change this step value
//alert("Hello");
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x + " Y : " + y
if(y < 3300 ){y= y + step;
document.getElementById('i1').style.top= y + "px"; // vertical movment
}else{
if(x < 400){x= x + step;
document.getElementById('i1').style.left= x + "px";//horizontal move
}
}
//////////////////////
}
function timer(){
disp();
my_time=setTimeout('timer()',10);
}
</script>
<div id="zes">
<button onclick="ex()">Click</button>
</div>
<style>
img.center { position: relative; top: 10%; bottom: 50%; left: 30%; right: 50%; margin: auto; }
</style>
<script>
function ex() {
var abc = document.createElement("IMG")
abc.setAttribute("class", "center")
abc.setAttribute("src", "../images/vangogh.jpg");
abc.setAttribute("width", "150");
abc.setAttribute("height", "150");
abc.setAttribute("alt", "example");
document.getElementById("zes").appendChild(abc);
}
</script>
The number of images is:
<div class="grid_C">
<p id="een_A"></p>
<p>The number of images is: <span id="twee_B"><span></p>
<p id="drie_C"></p>
<p id="vier_D"></p>
</div>
<script>
var allImgs = document.getElementsByTagName("img");
document.getElementById("een_A").innerHTML = "total of images in this page: " + allImgs.length + " pictures";
let nummer = document.images.length;
document.getElementById("twee_B").innerHTML = nummer;
var imgCount = document.images.length;
var svgCount = document.getElementsByTagName('svg').length;
var finalCount = imgCount + svgCount;
document.getElementById("drie_C").innerHTML = "total number of pictures: " + finalCount;
function countImages(){
var images = document.getElementsByTagName('IMG');
var count = images.length;
document.getElementById('vier_D').innerHTML= "grand total of pictures: " + count;
}
countImages();
</script>
<div class="grid_C">
<p id="vijf_E"></p>
<p id="zes_F"></p>
<p id="zeven_G"></p>
<p id="acht_H"></p>
</div>
<script>
var imgTags = document.getElementsByTagName('img');
// Loop through each <img> tag and extract the image file name
for (var i = 0; i < imgTags.length; i++) {
var imgTag = imgTags[i];
var imgSrc = imgTag.src;
console.log(imgSrc);
document.getElementById("vijf_E").innerHTML += imgSrc + "<br>";
}
Array.prototype.map.call(document.images, function (i) { console.log('image', i.src); });
Array.prototype.map.call(document.images, function (i) { document.getElementById("zes_F").innerHTML += 'image: '+ (i.src) + "<br>"; });
const getImages = (el, includeDuplicates = false) => {
const images = [...el.getElementsByTagName('img')].map(img =>
img.getAttribute('src') + "<br>"
);
return includeDuplicates ? images : [...new Set(images)];
};
document.getElementById("zeven_G").innerHTML = getImages(document, true);
document.getElementById("acht_H").innerHTML = getImages(document, false);
</script>